<template>
  <view class="allClass">
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      全部分类
    </view>
    <view class="content">
      <view class="tabs">
        <view
          class="li"
          v-for="(item, i) in listcategor"
          :key="i"
          @click="jumps(item.category_id, item.category_name)"
        >
          <image class="img" :src="item.image" mode="" />
          <view class="txt">{{ item.category_name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listcategor: [],
    };
  },
  onShow() {
    this.category();
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取商品类别
    async category() {
      const res = await this.$myRequest({
        url: "goods/category",
        method: "get",
      });
      this.listcategor = res.data.data.all;
    },
    // 查看商品类别
    jumps(i, shopName) {
      uni.navigateTo({
        url: "../Shopping/Classlist?id=" + i,
      });
      uni.setStorageSync("shopName", shopName);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.allClass {
  background-color: #f4f4f4;
  .content {
    min-height: calc(100vh);
    box-sizing: border-box;
    overflow: hidden;
    border-top: 20rpx solid #f4f4f4;
    .tabs {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: #fff;
      .li {
        width: 250rpx;
        height: 250rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        .img {
          display: block;
          width: 92rpx;
          height: 92rpx;
          margin: 0 auto;
        }
        .txt {
          display: block;
          text-align: center;
          margin: 15rpx auto 0;
        }
      }
      // .li:nth-child(1),
      // .li:nth-child(2),
      // .li:nth-child(4),
      // .li:nth-child(5) {
      //   border-right: 1px solid #e8e8e8;
      //   border-bottom: 1px solid #e8e8e8;
      // }
      // .li:nth-child(3),
      // .li:nth-child(6) {
      //   border-bottom: 1px solid #e8e8e8;
      // }
      // .li:nth-child(7),
      // .li:nth-child(8) {
      //   border-right: 1px solid #e8e8e8;
      // }
    }
  }
}
</style>
